<!DOCTYPE html><html lang="zh-CN"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>神鸟化身测试</title>
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&amp;display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'deep-space': '#0a1a35',
                        'gold-accent': '#d4af37',
                        'phoenix-red': '#e53935'
                    }
                }
            }
        }
    </script>
    <style>
        :root {
            --gold-light: rgba(212, 175, 55, 0.3);
        }
        
        body {
            background-color: #0a1a35;
            color: white;
            font-family: 'Noto Sans SC', sans-serif;
            min-height: 100vh;
            overflow-x: hidden;
            margin: 0;
            padding: 0;
            cursor: none;
        }
        
        .container {
            max-width: 1440px;
            margin: 0 auto;
            padding: 2rem 5rem;
            position: relative;
            z-index: 10;
        }
        
        /* 自定义光标样式 */
        .cursor-dot {
            position: fixed;
            top: 0;
            left: 0;
            width: 16px;
            height: 16px;
            background-color: #d4af37;
            border-radius: 50%;
            z-index: 9999;
            pointer-events: none;
            transform: translate(-50%, -50%);
            transition: transform 0.15s, width 0.2s, height 0.2s;
            mix-blend-mode: difference;
        }
        
        .cursor-trail {
            position: fixed;
            width: 6px;
            height: 6px;
            background-color: rgba(212, 175, 55, 0.7);
            border-radius: 50%;
            pointer-events: none;
            z-index: 9998;
            animation: fadeOut 0.5s forwards;
        }
        
        @keyframes fadeOut {
            to { opacity: 0; transform: scale(2); }
        }
        
        /* 流光背景效果 */
        .gradient-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                125deg,
                #0a1a35 0%,
                #0f2446 20%,
                #142b54 40%,
                #0f2446 60%,
                #0a1a35 80%
            );
            background-size: 400% 400%;
            z-index: -1;
            animation: gradientFlow 25s ease infinite;
        }
        
        @keyframes gradientFlow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .stellar-particle {
            position: absolute;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            z-index: -1;
        }
        
        /* 标题样式 */
        .main-title {
            font-family: 'Ma Shan Zheng', cursive;
            font-size: 4rem;
            letter-spacing: 0.3rem;
            text-align: center;
            margin: 2rem 0 1rem;
            color: #ffffff;
            position: relative;
            text-shadow: 0 0 15px rgba(212, 175, 55, 0.8);
        }
        
        .sub-title {
            font-size: 1.2rem;
            text-align: center;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 3rem;
            letter-spacing: 2px;
            font-weight: 300;
        }
        
        /* 问题卡片 */
        .question-card {
            background: rgba(15, 30, 60, 0.6);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(212, 175, 55, 0.3);
            border-radius: 20px;
            padding: 2.5rem;
            margin-bottom: 2.5rem;
            position: relative;
            overflow: hidden;
            opacity: 0.5;
            transition: all 0.5s ease;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }
        
        .question-card.active {
            opacity: 1;
            border: 1px solid #d4af37;
            box-shadow: 0 0 25px rgba(212, 175, 55, 0.3);
        }
        
        .question-card::after {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, 
                #d4af37, rgba(15, 30, 60, 0.3), rgba(15, 30, 60, 0.3), #d4af37);
            border-radius: 20px;
            z-index: -1;
        }
        
        .question-title {
            font-size: 1.8rem;
            margin-bottom: 1.8rem;
            color: #ffffff;
            font-weight: 500;
            position: relative;
            display: inline-block;
        }
        
        .question-title:after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 60px;
            height: 3px;
            background: #d4af37;
        }
        
        .options-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
        }
        
        .option-item {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 1.2rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
        }
        
        .option-item:hover {
            background: rgba(212, 175, 55, 0.15);
            border: 1px solid rgba(212, 175, 55, 0.5);
            transform: translateY(-3px);
        }
        
        .option-item.selected {
            background: rgba(212, 175, 55, 0.2);
            border: 1px solid #d4af37;
            box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
        }
        
        .option-item.selected .option-icon {
            color: #d4af37;
            background: rgba(0, 0, 0, 0.3);
        }
        
        .option-icon {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-right: 1rem;
            color: rgba(255, 255, 255, 0.7);
            transition: all 0.3s ease;
        }
        
        .option-text {
            flex: 1;
            color: rgba(255, 255, 255, 0.9);
            font-size: 1.05rem;
        }
        
        /* 提交按钮 */
        .submit-area {
            text-align: center;
            margin: 3rem 0 5rem;
        }
        
        .submit-btn {
            background: transparent;
            color: #d4af37;
            font-size: 1.2rem;
            padding: 0.8rem 3.5rem;
            border: 2px solid #d4af37;
            border-radius: 40px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: all 0.4s ease;
            letter-spacing: 1px;
            font-weight: 500;
            outline: none;
        }
        
        .submit-btn:disabled {
            opacity: 0.3;
            cursor: not-allowed;
            border: 2px solid rgba(255, 255, 255, 0.3);
            color: rgba(255, 255, 255, 0.5);
        }
        
        .submit-btn:not(:disabled):hover {
            color: #0a1a35;
            background: #d4af37;
            box-shadow: 0 0 25px rgba(212, 175, 55, 0.7);
        }
        
        .submit-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, 
                transparent, 
                rgba(255, 255, 255, 0.4), 
                transparent);
            transition: left 0.8s;
        }
        
        .submit-btn:not(:disabled):hover::before {
            left: 100%;
        }
        
        /* 结果弹窗 */
        .result-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(15px);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            visibility: hidden;
            opacity: 0;
            transition: all 0.5s ease;
        }
        
        .result-overlay.active {
            visibility: visible;
            opacity: 1;
        }
        
        .result-container {
            background: linear-gradient(to bottom, rgba(18, 35, 60, 0.9), rgba(10, 26, 53, 0.95));
            width: 90%;
            max-width: 800px;
            min-height: 600px;
            border-radius: 25px;
            border: 1px solid rgba(212, 175, 55, 0.4);
            box-shadow: 0 0 80px rgba(0, 0, 0, 0.6);
            overflow: hidden;
            position: relative;
            padding: 3rem;
            text-align: center;
        }
        
        .result-container::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, 
                #d4af37, rgba(15, 30, 60, 0.3), rgba(15, 30, 60, 0.3), #d4af37);
            z-index: -1;
            border-radius: 25px;
        }
        
        .result-title {
            font-family: 'Ma Shan Zheng', cursive;
            font-size: 3.2rem;
            margin-bottom: 1rem;
            color: #e53935;
            text-shadow: 0 0 25px rgba(229, 57, 53, 0.7);
        }
        
        .bird-name {
            font-family: 'Ma Shan Zheng', cursive;
            color: #d4af37;
            font-size: 4.2rem;
            margin: 0.5rem 0 1.5rem;
            text-shadow: 0 0 20px rgba(212, 175, 55, 0.8);
            animation: glowText 2s infinite alternate;
        }
        
        @keyframes glowText {
            from { text-shadow: 0 0 10px rgba(212, 175, 55, 0.6); }
            to { text-shadow: 0 0 30px rgba(212, 175, 55, 1); }
        }
        
        .bird-icon {
            font-size: 10rem;
            color: rgba(212, 175, 55, 0.8);
            margin: 1.5rem 0;
            filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.6));
        }
        
        .bird-description {
            max-width: 600px;
            margin: 0 auto;
            font-size: 1.2rem;
            line-height: 1.8;
            color: rgba(255, 255, 255, 0.85);
        }
        
        .close-btn {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            background: transparent;
            border: none;
            font-size: 1.5rem;
            color: rgba(255, 255, 255, 0.6);
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .close-btn:hover {
            color: #d4af37;
            background: rgba(255, 255, 255, 0.1);
            transform: rotate(90deg);
        }
        
        /* 动画效果 */
        .fade-in {
            animation: fadeIn 0.6s ease forwards;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* 媒体查询 */
        @media (max-width: 768px) {
            .container {
                padding: 1.5rem;
            }
            .main-title {
                font-size: 2.8rem;
            }
            .options-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- 动态背景 -->
    <div class="gradient-bg"></div>
    
    <!-- 自定义光标 -->
    <div class="cursor-dot"></div>
    
    <div class="container">
        <!-- 顶部引导区 -->
        <header class="text-center">
            <h1 class="main-title">神鸟灵魂契约</h1>
            <p class="sub-title">探索你的远古灵魂图腾，唤醒深藏血脉的神鸟之力</p>
        </header>
        
        <!-- 核心交互区 -->
        <main>
            <!-- 问题卡片1 -->
            <div class="question-card active fade-in" id="q1">
                <h2 class="question-title">当风暴席卷山谷时，你的选择是</h2>
                <div class="options-grid">
                    <div class="option-item" data-value="fire" data-weight="1">
                        <div class="option-icon">
                            <iconify-icon icon="mdi:fire"></iconify-icon>
                        </div>
                        <div class="option-text">如烈焰般对抗风暴核心，用炽热的意志开辟通路</div>
                    </div>
                    <div class="option-item" data-value="water" data-weight="1">
                        <div class="option-icon">
                            <iconify-icon icon="mdi:water"></iconify-icon>
                        </div>
                        <div class="option-text">顺应风暴流向，像流水般融入飓风，寻找能量的罅隙</div>
                    </div>
                    <div class="option-item" data-value="wind" data-weight="1">
                        <div class="option-icon">
                            <iconify-icon icon="mdi:weather-windy"></iconify-icon>
                        </div>
                        <div class="option-text">张开双翼驾驭风势，抵达风暴之眼，窥见宁静本源</div>
                    </div>
                    <div class="option-item" data-value="earth" data-weight="1">
                        <div class="option-icon">
                            <iconify-icon icon="mdi:mountain"></iconify-icon>
                        </div>
                        <div class="option-text">潜入地脉深处，以磐石之姿等待风暴退散</div>
                    </div>
                </div>
            </div>
            
            <!-- 问题卡片2 -->
            <div class="question-card fade-in" id="q2">
                <h2 class="question-title">夜幕降临，天际流火四溢，你看到</h2>
                <div class="options-grid">
                    <div class="option-item" data-value="truth" data-weight="2">
                        <div class="option-icon">
                            <iconify-icon icon="mdi:eye"></iconify-icon>
                        </div>
                        <div class="option-text">穿透表象的观测之眼，万千星光编织的预言纱幕</div>
                    </div>
                    <div class="option-item" data-value="power" data-weight="2">
                        <div class="option-icon">
                            <iconify-icon icon="mdi:shield"></iconify-icon>
                        </div>
                        <div class="option-text">暗影中涌动的守护之力，形成光能屏障震慑入侵者</div>
                    </div>
                    <div class="option-item" data-value="wisdom" data-weight="2">
                        <div class="option-icon">
                            <iconify-icon icon="mdi:book"></iconify-icon>
                        </div>
                        <div class="option-text">火焰在虚空中书写的远古契约，揭示宇宙法则</div>
                    </div>
                    <div class="option-item" data-value="balance" data-weight="2">
                        <div class="option-icon">
                            <iconify-icon icon="mdi:scale"></iconify-icon>
                        </div>
                        <div class="option-text">能量流动的黄金螺旋，显示破坏与创生的永恒平衡</div>
                    </div>
                </div>
            </div>
            
            <!-- 问题卡片3 -->
            <div class="question-card fade-in" id="q3">
                <h2 class="question-title">神谕铭文于虚空显现，其蕴含</h2>
                <div class="options-grid">
                    <div class="option-item" data-value="rebirth" data-weight="3">
                        <div class="option-icon">
                            <iconify-icon icon="mdi:reload"></iconify-icon>
                        </div>
                        <div class="option-text">涅槃真意：焚烬即是新生，灰烬中升腾永恒</div>
                    </div>
                    <div class="option-item" data-value="guardian" data-weight="3">
                        <div class="option-icon">
                            <iconify-icon icon="mdi:castle"></iconify-icon>
                        </div>
                        <div class="option-text">守护誓约：以羽翼为山河屏障，睁目即为日月</div>
                    </div>
                    <div class="option-item" data-value="harmony" data-weight="3">
                        <div class="option-icon">
                            <iconify-icon icon="mdi:music"></iconify-icon>
                        </div>
                        <div class="option-text">天地交响：翼动成风云，鸣啼化江海</div>
                    </div>
                    <div class="option-item" data-value="justice" data-weight="3">
                        <div class="option-icon">
                            <iconify-icon icon="mdi:gavel"></iconify-icon>
                        </div>
                        <div class="option-text">裁决之光：撕裂混沌的金色利爪，裁断正邪</div>
                    </div>
                </div>
            </div>
        </main>
        
        <!-- 提交区 -->
        <div class="submit-area">
            <button class="submit-btn" id="submit-btn" disabled="">觉醒神鸟之魂</button>
        </div>
    </div>
    
    <!-- 结果弹窗 -->
    <div class="result-overlay" id="result-overlay">
        <div class="result-container">
            <button class="close-btn" id="close-btn">╳</button>
            <h2 class="result-title">天启鉴定：</h2>
            <div class="bird-name" id="result-bird-name">朱雀</div>
            <div class="bird-icon">
                <iconify-icon icon="mdi:bird"></iconify-icon>
            </div>
            <div class="bird-description" id="result-description">
                你内在燃烧着南明离火的精魂！朱雀是象征文明与重生的圣禽，羽翼挥动间带来文明火种。作为红莲之翼的持有者，你在风暴中总能为他人燃起希望明灯。虽然偶尔有炽热情绪燎原之势，却能涅槃重生，在灰烬中铸造更耀眼的自我。与朱雀共舞，你将获得统御世间变革之势的力量，成为照亮混沌的永恒火炬。
            </div>
        </div>
    </div>
    
    <script>
        // 动态星空生成
        function createStellarParticles() {
            const container = document.querySelector('.gradient-bg');
            const count = 150;
            
            for (let i = 0; i < count; i++) {
                const particle = document.createElement('div');
                particle.classList.add('stellar-particle');
                
                const size = Math.random() * 2 + 1;
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                
                const posX = Math.random() * 100;
                const posY = Math.random() * 100;
                particle.style.left = `${posX}%`;
                particle.style.top = `${posY}%`;
                
                const opacity = Math.random() * 0.8 + 0.2;
                particle.style.opacity = opacity.toString();
                
                const animationDuration = Math.random() * 50 + 20;
                particle.style.animation = `flicker ${animationDuration}s infinite alternate`;
                
                container.appendChild(particle);
            }
        }
        
        // 自定义光标效果
        document.addEventListener('DOMContentLoaded', () => {
            const cursorDot = document.querySelector('.cursor-dot');
            let mouseX = 0, mouseY = 0, initDelay = 0;
            
            document.addEventListener('mousemove', (e) => {
                mouseX = e.clientX;
                mouseY = e.clientY;
                
                if(initDelay < 10) {
                    initDelay++;
                    cursorDot.style.opacity = 0;
                } else {
                    cursorDot.style.opacity = 1;
                }
                
                cursorDot.style.transform = `translate(${mouseX}px, ${mouseY}px)`;
                
                // 创建光粒拖尾
                setTimeout(() => {
                    const trail = document.createElement('div');
                    trail.className = 'cursor-trail';
                    trail.style.left = `${e.clientX}px`;
                    trail.style.top = `${e.clientY}px`;
                    document.body.appendChild(trail);
                    
                    setTimeout(() => {
                        trail.remove();
                    }, 1000);
                }, 50);
            });
            
            createStellarParticles();
        });
        
        // 问题卡片交互逻辑
        $(document).ready(function() {
            const questionCards = $('.question-card');
            const submitBtn = $('#submit-btn');
            const answers = {};
            
            // 激活问题
            questionCards.not('#q1').removeClass('active');
            
            // 选项选择事件
            $('.option-item').click(function() {
                const questionCard = $(this).closest('.question-card');
                const questionId = questionCard.attr('id');
                
                // 取消同问题中其他选项的选中状态
                questionCard.find('.option-item').removeClass('selected');
                // 选中当前选项
                $(this).addClass('selected');
                
                // 记录答案
                answers[questionId] = {
                    value: $(this).data('value'),
                    weight: $(this).data('weight')
                };
                
                // 激活下一个问题（如果存在）
                if (questionCard.next('.question-card').length > 0) {
                    setTimeout(() => {
                        questionCard.next('.question-card').addClass('active');
                    }, 300);
                }
                
                // 激活提交按钮（如果所有问题已回答）
                if (Object.keys(answers).length === questionCards.length) {
                    submitBtn.prop('disabled', false);
                }
            });
            
            // 提交按钮事件
            submitBtn.click(function() {
                // TODO: 计算匹配结果，目前使用静态示例
                displayResult();
            });
            
            // 关闭结果窗口
            $('#close-btn').click(function() {
                $('#result-overlay').removeClass('active');
            });
            
            // 神鸟映射关系
            const birdMap = {
                fire: {
                    name: '鹪明',
                    url: 'jiaoming.html',
                    desc: '你拥有鹪明的灵性与清辉，善于在黑暗中指引他人，智慧与希望常伴左右。你的内心澄澈，善于启迪和照亮周围世界。'
                },
                water: {
                    name: '幽昌',
                    url: 'youchang.html',
                    desc: '你是幽昌的化身，神秘而深邃，能洞察梦境与未来，善于在虚实之间游走，揭示未知的秘密。'
                },
                wind: {
                    name: '鹔鹴',
                    url: 'hufeng.html',
                    desc: '你如鹔鹴般自由灵动，主风与诗歌，思维敏捷，富有灵感，喜欢探索和表达自我。'
                },
                earth: {
                    name: '凤凰',
                    url: 'fenghuang.html',
                    desc: '你拥有凤凰的坚韧与重生之力，面对挑战能涅槃重生，生命力顽强，是团队中的支柱和希望。'
                }
            };
            
            // 结果计算和显示
            function displayResult() {
                var q1Ans = answers['q1'] ? answers['q1'].value : null;
                var bird = birdMap[q1Ans] || birdMap['fire'];
                $('#result-bird-name').text(bird.name);
                $('#result-description').text(bird.desc);
                // 动态插入“了解更多”按钮，统一跳转到神鳥傳説界面.html
                if (!$('#result-more-btn').length) {
                    $('<button id="result-more-btn" class="submit-btn" style="margin-top:2rem;">了解更多</button>')
                        .appendTo('.result-container')
                        .click(function(){
                            window.location.href = '神鳥傳説界面.html';
                        });
                } else {
                    $('#result-more-btn').off('click').on('click', function(){
                        window.location.href = '神鳥傳説界面.html';
                    });
                }
                $('#result-overlay').addClass('active');
            }
        });
    </script>

</body></html>